<template>
  <div class="home" :style="{ height: contentHeight }">
    <!-- 选择站点和时间 -->
    <Row type="flex" justify="start" align="middle" style="height:40px">
      <i-col>
        <Form :model="selectedData" :label-width="120" inline>
          <FormItem label="选择分公司：">
            <Select
              v-model="selectedData.subCompany"
              @on-change="handleSelectChange"
            >
              <Option
                v-for="item in subCompanyList"
                :value="item.value"
                :key="item.value"
              >
                {{ item.label }}
              </Option>
            </Select>
          </FormItem>
        </Form>
      </i-col>
      <i-col class="mytabs">
        <Tabs v-model="selectedData.dateTime" @on-click="handleTabChange">
          <TabPane label="实时数据" name="today"></TabPane>
          <TabPane label="近7天" name="week"></TabPane>
          <TabPane label="近一月" name="month"></TabPane>
        </Tabs>
      </i-col>
      <i-col class="myButton">
        <i-button v-if="selectedData.dateTime==='today'" @click="handleClicked"><Icon type="md-refresh" /> 刷新评分</i-button>
      </i-col>
    </Row>
    <!-- <keep-alive> -->
      <main-tab v-if="selectedData.dateTime==='today'" :refresh.sync="refresh"></main-tab>
      <main-tab v-if="selectedData.dateTime==='week'"></main-tab>
    <!-- </keep-alive> -->
    <!-- <keep-alive> -->
    <main-tab v-if="selectedData.dateTime === 'month'"></main-tab>
    <!-- </keep-alive> -->
  </div>
</template>

<script>
import constData from "@/util/constData"; // 保存的常量
import MainTab from "./mainTab";
import { clearTimeout, setTimeout } from "timers";

export default {
  name: "analysis",
  components: {
    MainTab
  },
  data() {
    return {
      timer: null,
      refresh: false,
      contentHeight: "",
      subCompanyList: constData.subCompanyList,
      selectedData: {
        subCompany: '',
        dateTime: 'today'
      },
      subCompanyList: constData.subCompanyList
    }
  },
  watch: {
    // 如果 `clientHeight` 发生改变，这个函数就会运行
    contentHeight: function() {
      return `${document.documentElement.clientHeight - 64}px`;
    }
  },
  created() {
    this.selectedData.subCompany = this.$route.params.companyName;
    this.selectedData.dateTime = this.$route.params.dateTime;
  },
  mounted() {
    // 获取浏览器可视区域高度
    this.contentHeight = `${document.documentElement.clientHeight - 64}px`;
    window.onresize = function temp() {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.contentHeight = `${document.documentElement.clientHeight - 64}px`;
      }, 200);
    };
  },
  methods: {
    /**
     * “选择分公司”改变时触发该函数
     */
    handleTabChange(val){
      this.$router.push({ name: 'sub-company-analysis', params: { companyName: this.selectedData.subCompany, dateTime: val}})
    },
    handleSelectChange(val){
      this.$router.push({ name: 'sub-company-analysis', params: { companyName: val, dateTime: this.selectedData.dateTime}})
    },
    handleClicked(){
      this.refresh = true;
    }
  }
};
</script>

<style lang="less" scoped>
.mytabs {
  height: 6rem;
}
.myButton{
  height: 5rem;
  margin-left: 10px;
}
.myButton button{
  padding: 5px 10px !important;
  color: #fff;
  outline: none;
  background-color: #0a4271 !important;
  border-color: #0a4271 !important;
}
.mytabs .ivu-tabs .ivu-tabs-nav .ivu-tabs-tab-active {
  color: #fff !important;
}
.mytabs .ivu-tabs .ivu-tabs-tab {
  font-size: 1.4rem !important;
}
</style>
